<template>
  <el-dialog title="新增候选人" :visible="visible" @close="handleClose" width="540px">
    <div class="form-container">
      <div class="file-box">
        <div class="file-item" :class="{active:radio==1}" @click="radio='1'">
          <div class="file-img">
            <img src="~@/assets/images/file.png" alt="种子简历" v-if="radio==2">
            <img src="~@/assets/images/file_active.png" alt="种子简历" v-if="radio==1">
          </div>
          <el-radio v-model="radio" label="1">种子简历</el-radio>
        </div>
        <div class="file-item" :class="{active:radio==2}" @click="radio='2'">
          <div class="file-img">
            <img src="~@/assets/images/files.png" alt="批量导入" v-if="radio==1">
            <img src="~@/assets/images/files_active.png" alt="批量导入" v-if="radio==2">
          </div>
          <el-radio v-model="radio" label="2">批量导入</el-radio>
        </div>
      </div>
      <div class="form-bottom">
        <ui-button type="blue" size="medium" @click="haneleNextStep">下一步</ui-button>
      </div>
      
    </div>
    <dialog-seedResume :visible.sync="seedResumeVisible" v-if="seedResumeVisible"></dialog-seedResume>
    <dialog-batchImport :visible.sync="batchImportVisible" @lastStep="lastStep" v-if="batchImportVisible"></dialog-batchImport>
  </el-dialog>
</template>

<script>
import {Dialog, Radio} from 'element-ui'
  export default {
    props: ['visible'],
    components: {
      [Dialog.name]: Dialog,
      [Radio.name]: Radio,
      'dialog-seedResume': () => import('./components/seedResume'),
      'dialog-batchImport': () => import('./components/batchImport')
    },
    data () {
      return {
        radio: '1',
        seedResumeVisible: false, //种子简历弹窗
        batchImportVisible: false, //批量导入弹窗
      }
    },
    methods: {
      handleClose () {
        this.$emit('update:visible', false)
      },
      //下一步
      haneleNextStep () {
        this.$emit('update:visible', false)
        if(this.radio === '1'){
          this.seedResumeVisible = true
        }else{
          this.batchImportVisible = true
        }
      },
      lastStep() {
        this.batchImportVisible = false;
        this.$emit('update:visible', true)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form-container{
    padding: 20px;
    .file-box{
      margin-top: 30px;
      text-align: center;
      .file-item{
        width: 160px;
        height: 240px;
        display: inline-block;
        margin: 0 40px;
        cursor: pointer;
        .file-img{
          width: 160px;
          height: 190px;
          background: #e0e0e0;
          border-radius: 10px;
          text-align: center;
          img{
            margin-top: 30px
          }
        }
        .el-radio{
          margin-top: 20px;
        }
      }
      .file-item:last-child img{
        margin-left: 5px;
      }
      .file-item:hover, .file-item.active{
        .file-img{
          background: #cce3f8;
        }
      }
    }
  }
 
</style>
